<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				list-style: none;
			}
			
			input {
				width: 50%;
				height: 30px;
				padding-left: 20px;
			}
			
			ul {
				width: 50%;
				height: auto;
				padding: 0;
				position: relative;
			}
			
			li {
				width: 100%;
				height: 30px;
				border: 1px solid darkgray;
				line-height: 30px;
				padding-left: 20px;
			}
			
			span:nth-child(2) {
				position: absolute;
				left: 50%;
			}
			
			li:nth-child(1) {
				background: darkgray;
			}
		</style>
	</head>

	<body>
		<input type="text" placeholder='搜索.....' id='input' />
		<ul id='ul'>
			<li><span>名称</span><span>城市</span></li>
			<li><span>Alfreds&nbsp;Futterkiste</span><span>Germany</span></li>
			<li><span>Berglunds&nbsp;snabbkop</span><span>Sweden</span></li>
			<li><span>Island&nbsp;Trading</span><span>UK</span></li>
			<li><span>Koniglich&nbsp;Essen</span><span>Germany</span></li>
		</ul>
		<script>
			var inputs = document.getElementById('input');
			var ul = document.getElementById('ul');
			var lis = document.getElementsByTagName('li');

			var filter = inputs.value.toLowerCase();

			for(var i = 0; lis.length; i++) {
				var content = lis[i].getElementsByTagName('span').innerHTML.toLowerCase();
				if(content.indexOf(filter) == -1) {
					lis[i].style.display = 'none';
				} else {
					lis[i].style.display = 'block';
				}
			
			}
		</script>
	</body>

</html>